<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!--    
    RoyCalderon ^_^  
    usar la clase de Java ResourcesBean para Controlar esta Vista
    -->
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.AppName}"></h:outputText>
        </ui:define>


        <ui:define name="body">
            <h:form enctype="multipart/form-data">  
                <p:fieldset legend="Cargar un Recurso!" toggleable="true" toggleSpeed="500" collapsed="false">

                    <h:panelGrid columns="3" cellpadding="4" style="text-align: center">  

                        <h:outputLabel for="tittle" value="Nombre Del Recurso: *"  />  
                        <p:inputText id="tittle" required="true" value="#{resourcesBean.selected.nombre}" requiredMessage="El Nombre del Recurso es Obligatorio" style="width: 300px;"/>  
                        <p:tooltip for="tittle" showEvent="focus" value="Ingrese el nombre del recurso" hideEvent="blur" />   

                        <h:outputLabel for="description" value="Descripcion Del Recurso: *"  />  
                        <p:inputTextarea id="description" required="true" rows="3" cols="50" autoResize="true" value="#{resourcesBean.selected.descripcion}" requiredMessage="La Descripcion del Recurso es Obligatorio"/>  
                        <p:tooltip for="description" showEvent="focus" value="Ingrese La Descripcion del recurso" hideEvent="blur" />   


                        <h:outputText value="Asignatura: * " />  

                        <p:selectOneMenu id="select1materia" value="#{resourcesBean.e_Asignatura}" required="true" requiredMessage="La Asignatura del Recurso es Obligatoria" style="width: 300px;">
                            <f:selectItems value="#{resourcesBean.select1Item()}" var="v_Asig" itemLabel="#{v_Asig.nombre}" itemValue="#{v_Asig}"></f:selectItems>
                            <f:converter binding="#{asignaturaConverter}"/>
                        </p:selectOneMenu>  
                        <p:tooltip for="select1materia" showEvent="focus" value="Selecciona la asignatura en donde cargaras el recurso!" hideEvent="blur" />  


                        <h:outputText value="Archivo: * " />  

                        <p:fileUpload value="#{resourcesBean.file}" mode="simple"  required="true"
                                      sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|jpg|pdf|doc|docx|xls|xlsx)$/"
                                      dragDropSupport="true"
                                      invalidSizeMessage="Se ha producido un error: El tamaño del archivo sobrepasa el maximo permitido!"
                                      invalidFileMessage="Se ha producido un error: El tipo de archivo no es permitido!"
                                      requiredMessage="El archivo que desea cargar para el Recurso es Obligatorio"
                                      label="Seleccionar Archivo"

                                      />  

                        <p:commandButton value="Subir Recurso" ajax="false"  
                                         label="Este es label" title="Este el tittle"
                                         actionListener="#{resourcesBean.upload}"/>


                    </h:panelGrid>  


                </p:fieldset> 
            </h:form>




            <h:form>
                <p:contextMenu for="resourcesTree">  
                    <p:menuitem value="View"  icon="ui-icon-search" oncomplete="PF('documentDialog').show()"/>  
                    <p:menuitem value="Delete" update="resourcesTree" icon="ui-icon-close"/>  
                </p:contextMenu>  


                <p:dialog id="documentDialog" header="Recurso" showEffect="fade" widgetVar="documentDialog"  visible="true" maximizable="false" minWidth="600" >  
                    <p:tabView>
                        <p:tab title="Informacion">
                            <p:panelGrid columns="2" style="alignment-adjust: middle; margin: auto; width: 540px"  >
                                <h:outputLabel for="resourceName" value="Nombre: "/>
                                <p:inputText id="resourceName" value="#{resourcesBean.selected.nombre}" label="Nombre Del Recurso" disabled="true" style="width: 320px"/>

                                <h:outputLabel for="resourceDescription" value="Descripcion: " />
                                <p:inputTextarea id="resourceDescription" value="#{resourcesBean.selected.descripcion}" label="Descripcion del recurso" disabled="true" style="width: 320px"/>

                                <h:outputLabel for="resourceUploadDate" value="Fecha de subida: " />
                                <p:inputText id="resourceUploadDate" value="#{resourcesBean.selected.fechaSubida}" label="Fecha de subida del recurso" disabled="true" style="width: 320px"/>

                                <h:outputLabel for="resourceDownloadCount" value="Numero de Descargas: " />
                                <p:inputText id="resourceDownloadCount" value="#{resourcesBean.selected.numeroDescargas}" label="Numero de descargas" disabled="true" style="width: 320px"/>

                                <h:outputLabel for="resourceRating" value="Valoracion del recurso: " />
                                <p:rating id="resourceRating" value="#{resourcesBean.ratingResource}" /> 

                                <h:outputLabel for="resourceDownload" value="Descargar Recurso: " />
                                <p:button value="Descargar" href="NimRod/#{resourcesBean.selected.asignaturaIdasignatura.codMateria}/#{resourcesBean.selected.url}"/>
                            </p:panelGrid>
                        </p:tab>
                        <p:tab title="Comentarios">
                            <p:accordionPanel style="max-width: 540px; min-width: 540px">
                                <c:forEach var="comment" items="#{resourcesBean.ratingResourceSelected}">
                                    <p:tab title="#{comment.usuario.nombre} valoro con #{comment.calificacion}" >    
                                        <h:outputText  value="#{comment.comentario}" />  
                                    </p:tab>  
                                </c:forEach>
                            </p:accordionPanel>
                        </p:tab>
                        <p:tab title="Cargar Comentario">
                            <p:editor id="textAreaComentario" width="535"/>
                            <p:commandButton value="Guardar Comentario"/>
                        </p:tab>
                    </p:tabView>
                </p:dialog>                  
                <p:fieldset legend="Ver Recursos Disponibles!" toggleSpeed="1000" toggleable="true" collapsed="false"  >
                    <h:outputLabel value="Busqueda Rapida: "/>
                    <p:autoComplete var="recurso" value="#{resourcesBean.selected}" completeMethod="#{resourcesBean.completeResource}" itemLabel="#{recurso.nombre}" itemValue="#{recurso}" converter="#{recursoConverter}" maxResults="10" minQueryLength="2" forceSelection="true" effect="puff">
                        <p:column>  
                            <h:outputLabel value="Nombre: "/>#{recurso.nombre}
                        </p:column>                        
                        <p:ajax update="documentDialog"  oncomplete="documentDialog.show()" event="itemSelect"/>
                    </p:autoComplete>
                    <p/>
                    <p:treeTable value="#{resourcesBean.treeRoot}" var="v_node" id="resourcesTree" selectionMode="single" selection="#{resourcesBean.selectedNode}">  
                        <p:column>  
                            <f:facet name="header">  
                                ► Nombre  
                            </f:facet>  
                            <h:outputText value="#{v_node.nombre}" />  
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                ► Descripcion  
                            </f:facet>  
                            <h:outputText value="#{v_node.descripcion}" />  
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                ► Tipo
                            </f:facet>  
                            <h:outputText value="#{v_node.tipo}" />  
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                Valoracion ♥
                            </f:facet>
                            <h:outputText value="#{v_node.valoracion}" />  
                        </p:column>
                    </p:treeTable>  
                </p:fieldset>
            </h:form>           
        </ui:define>

    </ui:composition>

</html>
